<template>
  <view class="content">
    <image class="content" src="@/static/code.png">
    </image>
    <view class="contenta">
      <u-gap :height="topDis"></u-gap>
      <view class="head">
        <view class="left">
          <image alt="" class="img" src="@/static/nh.png"/>
          <p class="title">欢迎使用同兴医废收运员端</p>
        </view>
        <view class="right">
          <image alt="" class="img1" src="@/static/wt.png"/>
        </view>
      </view>
      <view class="cardTag">
        <view class="headcard">
          <!-- <view :class="IndexTag==0?'active':''" class="leftcard " @click="changeInde(0)">账号密码登录</view>
          <view :class="IndexTag==1?'active1':''" class="righcard " @click="changeInde(1)">验证码登录</view> -->
          <view :class="{'active': IndexTag===0, 'radius': IndexTag === 1}" class="leftcard" @click="changeInde(0)">
            账号密码登录
          </view>
          <view :class="{'active1': IndexTag===1, 'radius1': IndexTag === 0}" class="righcard" @click="changeInde(1)">
            验证码登录
          </view>
        </view>
        <view class="card">
          <u-form ref="uForm" :model="form">
            <u-form-item>
              <view
                  style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.account" clearable placeholder="请输入手机号"/>
              </view>
            </u-form-item>
            <u-form-item v-if="IndexTag==0">
              <view
                  style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.password" clearable password placeholder="请输入密码"/>
              </view>
            </u-form-item>
            <u-form-item v-else>
              <view
                  style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.password" clearable placeholder="请输入验证码">
                  <template #suffix>
                    <up-code v-if="IndexTag==1" ref="uCode2" start-text="获取验证码"
                             @change="codeChange2"></up-code>
                    <text :text="tips2" class="u-page__code-text" @tap="getCode2">{{ tips2 }}
                    </text>
                  </template>
                </u-input>
              </view>
            </u-form-item>
            <view v-if="IndexTag==0" class="wjmm" @click="verify">
              忘记密码
            </view>
          </u-form>

          <view :class="add?'squareNext':''" class="square" @click="submit()">
            登录
          </view>
        </view>
      </view>
      <view class="yhxy">

        <up-checkbox-group v-model="aloneChecked">
          <up-checkbox></up-checkbox>
        </up-checkbox-group>
        <!-- 	<up-checkbox
                 name="agree"
                 :checked="aloneChecked"
             >
             </up-checkbox> -->
        我已阅读并同意
        <text @click.stop="toPath('pages/mys/agreement/userAgreement')">《用户协议》</text>
        和
        <text @click.stop="toPath('pages/mys/agreement/privacyPolicy')">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>
<script>
import {LoginApi} from "@/comms/api/loginApi";
import {toPath} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      value: '',
      tips2: '获取验证码',
      IndexTag: 0,
      add: true,
      aloneChecked: [],
      seconds: 60,
      form: {
        // account: '15820000000',
        // password: '111111',
				account: '',
				password: ''
      },
      topDis: 0
    }
  },
  watch: {
    IndexTag(oldValue) {
      this.form = {
        account: '',
        password: ''
      }
    },
    form: {
      deep: true,
      handler(newvalue) {
        let data = ['', undefined, null]
        let val = 0
        Object.keys(newvalue).map(key => {
          if (!data.includes(newvalue[key])) {
            val += 1
          }
        })
        if (val == 2) {
          this.add = true
        } else {
          this.add = false
        }
      },
    },
  },
  onLoad() {
    this.topDis = uni.getStorageSync('topDis')
    // 判断是否自动登录
    const {ctUserInfo} = uni.getStorageSync('user_info') || {};

    if (ctUserInfo) {
      this.getWxCode((code) => {
        LoginApi.autoLogin({wxCode: code, mobile: ctUserInfo.mobile}).then(({data = {}}) => {
          uni.setStorageSync('user_info', data?.loginUser);
          uni.setStorageSync('token', data?.token);
          uni.reLaunch({url: '/pages/task/index'})
        })
      })
    }
  },
  methods: {
    toPath,
    getWxCode(handler) {
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: function (event) {
          handler?.(event.code);
        },
        fail: function (err) {
        }
      })
    },
    verify() {
      uni.navigateTo({
        url: '/pages/verify/verify'
      })
    },
    submit() {
      if (this.aloneChecked.length) {
        if (this.add) {
          this.getWxCode((code) => {
            LoginApi.login({...this.form, wxCode: code}).then(({data}) => {
              uni.showToast({
                title: "登录成功"
              })
              uni.setStorageSync('user_info', data?.loginUser);
              uni.setStorageSync('token', data?.token);
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/task/index'
                })
              }, 1000)
            }).catch(err => {
              uni.$u.toast('登录失败!');
            })
          })
        } else {
          uni.$u.toast('请填写完整!');
        }
      } else {
        uni.$u.toast('请勾选用户协议!');
      }
    },
    codeChange2(text) {
      this.tips2 = text;
    },
    getCode2() {

      if (this.$refs.uCode2.canGetCode) {
        // 模拟向后端请求验证码
        this.$refs.uCode2.start();
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },


    login() {

    },
    changeInde(value) {
      this.IndexTag = value
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  box-sizing: border-box;

}

.contenta {
  position: absolute;
  top: 0rpx;
  width: 100%;

}


.yhxy {
  display: flex;
  align-items: center;
  padding: 40rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #666666;
  position: fixed;
  bottom: 80rpx;
  left: 40rpx;

  text {
    color: #1763FC;
  }
}


.head {
  width: 670rpx;
  height: 232rpx;
  margin: 100rpx auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #3f4151;
    line-height: 48rpx;
    margin-top: 32rpx;
  }

  .img {
    width: 168rpx;
    height: 64rpx;
  }

  .img1 {
    width: 144rpx;
    height: 144rpx;
  }
}

.card {
  width: 670rpx;
  background: #FFF;
  border-radius: 20rpx;
  margin: auto;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}

.cardTag {
  width: 670rpx;
  background: #FFF;
  border-radius: 20rpx;
  margin: auto;
  margin-top: 60rpx;
}

.squareNext {
  opacity: 1 !important;
}

.square {
  width: 610rpx;
  height: 110rpx;
  background: #1763FC;
  border-radius: 20rpx;
  text-align: center;
  line-height: 110rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: center;
  color: #ffffff;
  margin: 40rpx 0;
  opacity: 0.5;
}


.headcard {
  width: 100%;
  height: 100rpx;
  // background: #fbfbfb;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx 20rpx 0 0;
  line-height: 100rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #666666;

  .radius1 {
    border-radius: 0 0 0 20rpx;
    background-color: #FAF7F6;
  }

  .radius {
    border-radius: 0 0 20rpx 0;
    background-color: #FAF7F6;
  }

}

.active,
.active1 {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: Semibold;
  text-align: center;
  color: #1763fc !important;
  position: relative;
  // background: #ffffff;
  font-weight: bold;

}

.leftcard {
  flex: 1;
  // border-radius: 20rpx 20rpx 0 0;
  position: relative;
  text-align: center;

}

::v-deep .u-border {
  border: none !important;
}

.righcard {
  flex: 1;
  // border-radius: 0rpx 20rpx 0 20rpx;
  text-align: center;
}

.wjmm {
  width: 100%;
  text-align: right;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  color: #1763fc;
}
</style>